<template>
	<view>
		<view class="padding form">
			<view class="uni-form-item uni-column">
				<view class="title">
					日期
					<text class="text-red">*</text>
				</view>
				<text class="icon cuIcon-calendar"></text>
				<input class="uni-input input-icon" v-model="m.serviceData" @click="calendarOpen" disabled="disabled" name="input" placeholder="服务日期" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">
					航班号
					<text class="text-red">*</text>
				</view>
				<input class="uni-input" name="input" v-model="m.flightNumber" placeholder="请输入航班号" />
			</view>
			<view class="uni-form-item uni-column" v-show="isServerType == 2 || isServerType == 3">
				<view class="title">
					起飞时间
					<text class="text-red">*</text>
				</view>
				<text class="icon cuIcon-calendar"></text>
				<picker mode="time" :value="m.takeOffTime" @change="bindTimeChange">
					<view class="uni-input time-input" :class="m.takeOffTime == '请选择起飞时间' ? 'no' : ''">{{ m.takeOffTime }}</view>
				</picker>
			</view>
			<view class="uni-form-item uni-column" v-show="isServerType == 1">
				<view class="title">
					到达时间
					<text class="text-red">*</text>
				</view>
				<text class="icon cuIcon-calendar"></text>
				<picker mode="time" :value="m.landTime" @change="bindLandTimeChange">
					<view class="uni-input time-input" :class="m.landTime == '请选择到达时间' ? 'no' : ''">{{ m.landTime }}</view>
				</picker>

				<!-- <view class="flex justify-between">
					<view style="width:70%">
						<view class="title">到达时间 <text class="text-red">*</text></view>
						<text class="icon cuIcon-calendar"></text>
						<picker mode="time" :value="m.landTime" @change="bindLandTimeChange">
							<view class="uni-input time-input" :class="m.landTime=='请选择到达时间'?'no':''">{{m.landTime}}</view>
						</picker>
					</view>
					<view style="padding-top: 14rpx;">
						<view class="title">是否次日 </view>
						<switch color="#0081ff" @change="switchChange" />
					</view>
				</view> -->
			</view>
			<view class="flex">
				<view class="flex-sub w-left" style="padding-right: 15px;">
					<view class="uni-form-item uni-column">
						<view class="title">
							人数
							<text class="text-red">*</text>
						</view>
						<view class="example-body"><uni-number-box :min="1" @change="numberChange" /></view>
					</view>
				</view>
				<view class="flex-sub w-right" style="padding-left: 15px;">
					<view class="uni-form-item uni-column">
						<view class="title text-red">
							价格
							<text class="text-red">*</text>
						</view>
						<input class="uni-input" v-model="m.price" name="input" disabled="disabled" placeholder="50" />
					</view>
				</view>
			</view>
			<view class="flex" v-for="(it, index) in m.contactUs" :key="index">
				<view class="flex-sub w-left" style="padding-right: 15px;">
					<view class="uni-form-item uni-column">
						<view class="title">
							联系人
							<text class="text-red">*</text>
						</view>
						<input class="uni-input" v-model="it.name" name="input" placeholder="姓名" />
					</view>
				</view>
				<view class="flex-sub w-right" style="padding-left: 15px;">
					<view class="uni-form-item uni-column">
						<view class="title">
							联系电话
							<text class="text-red">*</text>
						</view>
						<input class="uni-input" :class="index != 0 ? 'del-input' : ''" v-model="it.phone" name="input" placeholder="联系方式" />
						<text class="lg text-gray cuIcon-close del-icon" v-if="index != 0" @click="delUs(index)"></text>
					</view>
				</view>
			</view>
			<view class="add-us">
				<view class="add-btn" @click="addus"><text class="cuIcon-add text-blue"></text></view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">
					司机电话
					<text class="text-gray">（选填）</text>
				</view>
				<input class="uni-input" name="input" v-model="m.driverPhone" placeholder="请输入司机联系方式" />
			</view>
			<view class="title" style="padding:20px 0 10px 0;">
				上传图片
				<text class="text-gray">（选填，最多支持8张）</text>
			</view>
			<view class="cu-form-group" style="padding-left: 0px;">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length < 9"><text class="cuIcon-cameraadd"></text></view>
				</view>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">
					备注
					<text class="text-gray">（选填）</text>
				</view>
				<textarea class="uni-input" v-model="m.summary" style="height: 70px;width:100%" name="input" placeholder="(选填)请输入备注信息"></textarea>
			</view>
		</view>
		<view class="padding" style="padding-top: 0px;"><button class="cu-btn block margin-tb-sm lg round bg-yellow" :loading="loading" @click="submits">提交</button></view>
		<uni-calendar
			ref="calendar"
			:date="info.date"
			:insert="info.insert"
			:lunar="info.lunar"
			:startDate="info.startDate"
			:endDate="info.endDate"
			:range="info.range"
			@confirm="calendarOk"
		/>
	</view>
</template>

<script>
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniNumberBox,
		uniCalendar
	},
	data() {
		return {
			m: {
				types: 1,
				mold: 1,
				memberGuid: '',
				takeOffTime: '请选择起飞时间',
				landTime: '请选择到达时间',
				serviceData: '',
				peopleNumber: 1,
				price: 50,
				summary: '',
				isNextDay: false,
				contactUs: [
					{
						name: '',
						phone: ''
					}
				]
			},
			imgList: [],
			index: -1,
			isServerType: 1, //1=接机服务和2=送机服务
			info: {
				lunar: true,
				range: false,
				insert: false
			},
			loading: false
		};
	},
	computed: {
		...mapState(['hasLogin', 'user'])
	},
	onLoad(option) {
		if (!this.hasLogin) {
			uni.navigateTo({
				url: '/pages/account/login'
			});
		} else {
			this.m.memberGuid = this.user.guid;
		}

		var subTitle = '';
		switch (parseInt(option.mold)) {
			case 1:
				subTitle = '普通接机服务';
				break;
			case 2:
				subTitle = '普通送机服务';
				break;
			case 3:
				subTitle = 'VIP接机服务';
				break;
			case 4:
				subTitle = 'VIP送机服务';
				break;
			case 5:
				subTitle = '登机口接机服务';
				break;
			case 6:
				subTitle = '登机口送机服务';
				break;
			case 7:
				subTitle = '安检通道';
				break;
			case 8:
				subTitle = '贵宾休息室';
				break;
		}
		uni.setNavigationBarTitle({
			title: option.title + '_' + subTitle
		});

		this.m.types = option.types;
		this.m.mold = option.mold;
		if (option.mold == 2 || option.mold == 4 || option.mold == 6) {
			this.isServerType = 2; //送机服务
		}
		if (option.mold == 7 || option.mold == 8) {
			this.isServerType = 3;
		}
		this.jsPrice(1);
	},
	onReachBottom() {
		//console.log('onReachBottom');
	},
	onPullDownRefresh() {
		if (!this.hasLogin) {
			uni.navigateTo({
				url: '/pages/account/login'
			});
		} else {
			this.isxl = true;
			this.Init();
		}
	},
	methods: {
		delUs(v) {
			this.m.contactUs.splice(v, 1);
		},
		switchChange(e) {
			this.m.isNextDay = e.detail.value;
			console.log(this.m.isNextDay);
		},
		jsPrice(num) {
			//国内航班-普通接送
			if ((this.m.types == 1 && this.m.mold == 1) || (this.m.types == 1 && this.m.mold == 2)) {
				this.m.price = 50;
				if (this.m.peopleNumber > 24) {
					this.m.price = 80;
				}
				if (this.m.mold == 1) {
					if (this.m.landTime != '请选择到达时间') {
						let t = this.m.landTime.replace(':', '');
						if (parseInt(t) > 2300 || parseInt(t) < 500) {
							this.m.price = 80;
						}
					}
				}
				if (this.m.mold == 2) {
					if (this.m.takeOffTime != '请选择起飞时间') {
						let t = this.m.takeOffTime.replace(':', '');
						if (parseInt(t) > 2300 || parseInt(t) < 500) {
							this.m.price = 80;
						}
					}
				}
			}
			//国际航班-普通接送
			if ((this.m.types == 2 && this.m.mold == 1) || (this.m.types == 2 && this.m.mold == 2)) {
				this.m.price = 100;
				if (this.m.peopleNumber > 24) {
					this.m.price = 150;
				}
				if (this.m.mold == 1) {
					if (this.m.landTime != '请选择到达时间') {
						let t = this.m.landTime.replace(':', '');
						if (parseInt(t) > 2100 || parseInt(t) < 500) {
							this.m.price = 150;
						}
					}
				}
				if (this.m.mold == 2) {
					if (this.m.takeOffTime != '请选择起飞时间') {
						let t = this.m.takeOffTime.replace(':', '');
						if (parseInt(t) > 2100 || parseInt(t) < 500) {
							this.m.price = 150;
						}
					}
				}
			}
			//国内航班-Vip接送/每人
			if ((this.m.types == 1 && this.m.mold == 3) || (this.m.types == 1 && this.m.mold == 4)) {
				this.m.price = 20 * num;
			}
			//国际航班-Vip接送/每人
			if ((this.m.types == 2 && this.m.mold == 3) || (this.m.types == 2 && this.m.mold == 4)) {
				this.m.price = 50 * num;
			}
			//国内航班-登机口接送/每人
			if ((this.m.types == 1 && this.m.mold == 5) || (this.m.types == 1 && this.m.mold == 6)) {
				this.m.price = 120 * num;
			}
			//国际航班-登机口接送/每人
			if ((this.m.types == 2 && this.m.mold == 5) || (this.m.types == 2 && this.m.mold == 6)) {
				this.m.price = 150 * num;
			}
			//国内航班-安检通道/每人
			if (this.m.types == 1 && this.m.mold == 7) {
				this.m.price = 100 * num;
			}
			//国际航班-登机口接送/每人
			if (this.m.types == 2 && this.m.mold == 7) {
				this.m.price = 500 * num;
			}
			//国内航班-安检通道/每人
			if (this.m.types == 1 && this.m.mold == 8) {
				this.m.price = 200 * num;
			}
			//国际航班休息室/每人
			if (this.m.types == 2 && this.m.mold == 8) {
				this.m.price = 300 * num;
			}
		},
		bindTimeChange(e) {
			this.m.takeOffTime = e.target.value;
			this.jsPrice(this.m.peopleNumber);
		},
		bindLandTimeChange(e) {
			this.m.landTime = e.target.value;
			this.jsPrice(this.m.peopleNumber);
		},
		calendarOpen() {
			this.$refs.calendar.open();
		},
		calendarOk(e) {
			this.m.serviceData = e.fulldate;
		},
		addus() {
			this.m.contactUs.push({
				name: '',
				phone: ''
			});
		},
		numberChange(value) {
			this.m.peopleNumber = value;
			this.jsPrice(value);
		},
		ChooseImage() {
			uni.chooseImage({
				count: 4, //默认9
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: res => {
					if (this.imgList.length != 8) {
						this.imgList = this.imgList.concat(res.tempFilePaths);
					} else {
						this.imgList = res.tempFilePaths;
					}
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这张图片吗？',
				cancelText: '取消',
				confirmText: '是的',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		},
		uploadImg(img, data) {
			let that = this;
			uni.uploadFile({
				url: that.$url + '/api/app/files/upload',
				filePath: img,
				name: 'file',
				formData: data,
				success: uploadFileRes => {
					//var result=JSON.parse(uploadFileRes.data);
					//console.log(result);
				}
			});
		},
		compareDate(date1, date2) {
			var oDate1 = new Date(date1.replace(/-/g, '/'));
			var oDate2 = new Date(date2.replace(/-/g, '/'));
			if (oDate1.getTime() >= oDate2.getTime()) {
				return true; 
			} else {
				return false;
			}
		},
		submits() {
			if (this.loading) {
				return;
			}
			//this.weixinPay();return;
			if (!this.m.serviceData) {
				this.$api.msg('请选择服务日期~');
				return;
			}
			var nowTime=new Date();
			var nowDate=nowTime.getFullYear()+'-'+(nowTime.getMonth()+1)+'-'+nowTime.getDate();
			if (!this.compareDate(this.m.serviceData,nowDate)) {
				this.$api.msg('服务日期必须大于当前日期~');
				return;
			}
			if (!this.m.flightNumber) {
				this.$api.msg('请输入航班号~');
				return;
			}
			if (this.m.flightNumber.length > 6) {
				this.$api.msg('航班号是由英文和数字组成,不能超过6位~');
				return;
			}
			if (this.isServerType == 2 || this.isServerType == 3) {
				if (!this.m.takeOffTime || this.m.takeOffTime == '请选择起飞时间') {
					this.$api.msg('请选择起飞时间~');
					return;
				}
				this.m.landTime = '00:00';
			}
			if (this.isServerType == 1) {
				if (!this.m.landTime || this.m.landTime == '请选择到达时间') {
					this.$api.msg('请选择到达时间~');
					return;
				}
				//判断是否次日
				// if(this.m.isNextDay){
				// 	var dt = new Date(this.m.serviceData);console.log(dt);
				// 	dt.setDate(dt.getDate()+1);
				// 	this.m.landTime=dt.getFullYear()+'-'+(dt.getMonth()+1)+'-'+dt.getDate()+' '+this.m.landTime;
				// 	console.log(this.m.landTime);
				// }
				this.m.takeOffTime = '00:00';
			}

			var isRes = true;
			console.log(this.m.contactUs.length);
			if (this.m.contactUs.length == 0) {
				this.$api.msg('最少要填写一组联系人信息~');
				return;
			}
			let _this = this;
			for (let i = 0; i < this.m.contactUs.length; i++) {
				if (!_this.m.contactUs[i].name) {
					isRes = false;
					_this.$api.msg('联系人姓名不能为空~');
					return;
				}
				if (!_this.m.contactUs[i].phone) {
					isRes = false;
					_this.$api.msg('联系方式不能为空~');
					return;
				}
				if (!/^1[3456789]\d{9}$/.test(_this.m.contactUs[i].phone)) {
					isRes = false;
					_this.$api.msg('联系方式必须为手机号码~');
					return;
				}
			}
			if (!isRes) {
				this.$api.msg('最少要填写一组联系人信息~');
				return;
			}
			if (this.isServerType == 2 || this.isServerType == 3) {
				this.m.qftime = this.m.serviceData + ' ' + this.m.takeOffTime;
			}
			if (this.isServerType == 1) {
				this.m.ddtime = this.m.serviceData + ' ' + this.m.landTime;
			}
			console.log(this.m);
			uni.showLoading({
				title: 'loading'
			});
			this.loading = true;
			this.$api.ajax('index/addorder', this.m, function(res) {
				uni.hideLoading();
				var result = res[1].data;
				if (result.statusCode == 200) {
					//_this.$api.msg('提交成功，请等待服务专员与您联系~');
					//如果有图片，开始上传图片
					if (_this.imgList.length > 0) {
						for (let i = 0; i < _this.imgList.length; i++) {
							_this.uploadImg(_this.imgList[i], { guid: result.data, type: 2 });
						}
					}
					// setTimeout(() => {
					// 	uni.navigateBack();
					// }, 600)
					//去支付
					_this.m.price = 0.01; //测试的金额
					_this.weixinPay(result.data);
				} else {
					_this.$api.msg(result.message);
				}
			});
		},
		weixinPay(om) {
			var _this = this;
			uni.login({
				success: e => {
					//console.log("login success", e);
					//console.log("order success", om);
					//console.log("order param",{code:e.code,price:_this.m.price,number:om.number,orderGuid:om.orderGuid,userGuid:om.userGuid});
					_this.$api.ajax('index/xcxpay', { code: e.code, price: _this.m.price, number: om.number, orderGuid: om.orderGuid, userGuid: om.userGuid }, function(res) {
						var result = res[1].data;
						if (result.statusCode == 200) {
							console.log('得到接口prepay_id', res.data);
							let paymentData = result.data;
							uni.requestPayment({
								timeStamp: paymentData.timeStamp,
								nonceStr: paymentData.nonceStr,
								package: paymentData.package,
								signType: paymentData.signType,
								paySign: paymentData.paySign,
								success: res => {
									//修改订单状态
									_this.$api.ajax('index/paystatus', { parm: om.number }, function(pres) {
										var payResult = pres[1].data;
										if (payResult.statusCode == 200) {
											uni.navigateTo({
												url: '/pages/order/success?price=' + _this.m.price
											});
										} else {
											_this.$api.msg('订单状态修改失败: ' + payResult.message);
										}
									});
								},
								fail: res => {
									_this.$api.msg('支付失败,原因为: ' + res.errMsg);
								},
								complete: () => {
									_this.loading = false;
								}
							});
						} else {
							_this.$api.msg(result.message);
						}
					});
				},
				fail: e => {
					console.log('fail', e);
					_this.loading = false;
					_this.$api.msg('支付失败,原因为: ' + e.errMsg);
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #ffffff;
}
.uni-numbox {
	width: 100% !important;
	.uni-numbox__value {
		width: auto !important;
	}
}
.uni-numbox__minus,
.uni-numbox__plus,
.uni-numbox__value {
	height: 44px !important;
	width: 60px !important;
}
.w-right {
	-webkit-flex-basis: 60%;
	flex-basis: 60%;
}
.w-left {
	-webkit-flex-basis: 40%;
	flex-basis: 40%;
}
.add-us {
	padding-top: 35rpx;
	text-align: center;

	.add-btn {
		display: inline-block;
		width: 55px;
		height: 55px;
		border-radius: 50px;
		background: rgb(235, 238, 245);
	}

	.cuIcon-add {
		font-size: 30px;
	}
}

.form {
	.title {
		padding: 10rpx 25rpx 10rpx 0rpx;
	}

	.uni-form-item {
		position: relative;

		.icon {
			position: absolute;
			left: 10px;
			bottom: 9px;
			font-size: 20px;
			color: #909399;
		}
	}
	.del-input {
		width: 80%;
	}
	.del-icon {
		position: absolute;
		right: 8rpx;
		top: 88rpx;
		font-size: 22px;
	}
	.uni-input {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		padding: 20rpx 20rpx;
		line-height: 24px;
		height: auto;
	}
	.uni-input.time-input {
		height: 44px;
		padding-left: 65rpx;
	}
	.uni-input.no {
		color: #999999;
	}
	.input-icon {
		padding-left: 65rpx;
	}
}
</style>
